<template>
	<view class="editPage">
		<uni-notice-bar show-icon scrollable text="最多可创建9个奖项,最多支持500人参与" />
		<view class="awards">
			<view class="headerTitle">
				—— 奖品奖项 ——
			</view>
			<view class="option" v-for="(item,index) in awardList" :key="item.id">
				<view class="top">
					<view class="left">
						<view class="pic" @click="chooseImage(index)">
							<text v-if="item.progress && item.progress < 100">{{item.progress}}</text>
							<image :src="item.picurl" mode="aspectFill" @click.stop="preview(item.picurl)" v-if="item.picurl"></image>
							<uni-icons type="image" size="50" color="#555" v-else></uni-icons>
						</view>
						<view class="text" @click="chooseImage(index)">
							更换图片
						</view>
					</view>
					<view class="right">
						<view class="row">
							<view class="name">
								<input type="text" v-model="item.name" placeholder="请输入奖项名称" />
							</view>
							<view class="remove" @click="removeAwards(index)">
								<uni-icons type="minus-filled" size="30" color="#ee4626"></uni-icons>
							</view>
						</view>
						<view class="row">
							<view>
								<input type="text" placeholder="请输入奖品名称" v-model="item.description" />
							</view>
							<view></view>
						</view>
					</view>
				</view>

				<view class="row">
					<view class="name">
						奖品份数
					</view>
					<view class="">
						<uv-number-box :value="item.number"></uv-number-box>
					</view>
				</view>
			</view>

			<view class="addBox">
				<view class="btn" @click="addAwards" v-if="awardList.length<9">
					增加奖项
				</view>
			</view>
		</view>
		<view class="rule">
			<view class="headerTitle">
				—— 规则说明 ——
			</view>
			<view class="content">
				<textarea v-model="ruleCenter" placeholder="请编辑规则说明"></textarea>
			</view>
		</view>
		<view class="more">
			<view class="headerTitle">
				—— 更多选项 ——
			</view>
			<view class="content">
				<view class="row">
					<view class="name">
						结束时间
					</view>
					<view class="control">
						<uni-datetime-picker v-model="endTime" type="datetime" start="2024-08-06" end="2024-08-31" />
					</view>
				</view>
				<view class="row">
					<view class="name">
						是否能重复中奖
					</view>
					<view>
						<switch :checked="isRepeat" @change="repeatChange" color="red"
							style="transform: scale(.8);transform-origin: right;"></switch>
					</view>
				</view>
			</view>
		</view>

		<view class="submitBtn" @click="addSubmit">
			<button type="primary">确认提交</button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		getFileExtension,
		uuid
	} from '@/utils/tools';
	import moment from "moment"
	import {
		goBack,
		routerTo,
		uploadPictures
	} from '@/utils/common';
	const db = uniCloud.database();

	const endTime = ref(null);
	const isRepeat = ref(false);
	const awardList = ref([{
			name: "一等奖",
			description: "",
			picurl: "",
			number: 1,
			id: uuid()
		},
		{
			name: "二等奖",
			description: "",
			picurl: "",
			number: 1,
			id: uuid()
		}
	]);
	const ruleCenter = ref(`1、点击参与报名参加活动；
2、参与后无须额外操作，等待主办方发起抽奖；
3、抽奖成功后会将抽奖结果返回，可在右上角设置查看；
4、奖获奖记录给现场工作人员核销后，领取对应奖品；`)
	const addAwards = () => {
		awardList.value.push({
			name: "",
			description: "",
			picurl: "",
			number: 1,
			id: uuid()
		})
	}
	const removeAwards = (index) => {
		awardList.value.splice(index, 1);
	}

	// 上传图片
	const chooseImage = (index) => {
		uploadPictures(1, progress => {
			console.log("上传进度条------------>", progress);
			awardList.value[index].progress = progress;
		}).then(res => {
			let fileID = res;
			awardList.value[index].picurl = fileID;
		}).catch(err => {
			console.log("--------失败", err)
		})
	}

	// 播放图片
	const preview = (url) => {
		uni.previewImage({
			urls: [url]
		})
	}

	const repeatChange = (e) => {
		isRepeat.value = e.detail.value;
	}

	const addSubmit = async () => {
		if (!(awardList.value.length && awardList.value.every(item => item.name && item.description))) {
			uni.showToast({
				title: "奖项及奖品为必填",
				icon: "none",
				duration: 2500
			});
			return
		}
		if (!ruleCenter.value) {
			uni.showToast({
				title: "抽奖规则为必填",
				icon: "none",
				duration: 2500
			});
			return
		}
		let formData = {
			awardList: awardList.value,
			ruleCenter: ruleCenter.value,
			isRepeat: isRepeat.value,
			endTime: endTime.value
		}
		uni.showLoading({
			title: "提交中...",
			mask: true
		})
		try{
			let {result:{errCode}} = await db.collection("raffle-data").add(formData);
			if(errCode === 0){
				uni.showToast({
					title:"创建成功",
					icon:"none"
				})
				setTimeout(() => {
					goBack()
				},1000)
			} else {
				uni.showToast({
					title:"创建失败",
					icon:"error"
				})
			}
		}catch(err){
			console.log(err)
			uni.showToast({
				title:err,
				icon:"none"
			})
		}
	}
</script>

<style lang="scss" scoped>
	.editPage {
		.headerTitle {
			font-size: 34rpx;
			color: #e02800;
			font-weight: bolder;
			text-align: center;
			line-height: 2em;
			padding-bottom: 30rpx;
		}

		.row {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 34rpx;
			border-bottom: 1px solid #f4f4f4;
			height: 100rpx;
			padding: 10rpx 0;
		}

		.awards {
			.option {
				padding: 20rpx;
				border-bottom: 14rpx solid #f4f4f4;
				padding-bottom: 0;

				.top {
					display: flex;

					.left {
						width: 160rpx;
						display: flex;
						align-items: center;
						flex-direction: column;
						justify-content: center;

						.pic {
							width: 120rpx;
							height: 120rpx;
							background: #f4f4f4;
							display: flex;
							align-items: center;
							justify-content: center;

							image {
								width: 100%;
								height: 100%;
							}
						}

						.text {
							font-size: 28rpx;
							color: #999;
							line-height: 2em;
						}
					}

					.right {
						flex: 1;

						.row {
							.name {
								font-size: 38rpx;
								font-weight: bolder;
							}
						}
					}
				}
			}

			.addBox {
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 60rpx 0;
				background: #f4f4f4;

				.btn {
					border: 1px solid #ee4626;
					padding: 15rpx 35rpx;
					color: #ee4626;
					font-size: 36rpx;
					border-radius: 200rpx;
				}
			}
		}

		.rule {
			padding: 20rpx;
			margin-top: 60rpx;

			textarea {
				font-size: 36rpx;
				background: #fafafa;
				border: 1px solid #efefef;
				padding: 10rpx 20rpx;
				line-height: 1.7em;
				min-height: 380rpx;
				color: #333;
				width: 100%;
			}
		}

		.more {
			margin-top: 60rpx;

			.content {
				padding: 20rpx;

				.control {
					width: 400rpx;
				}
			}
		}

		.submitBtn {
			padding: 60rpx 20rpx 100rpx;

			button {
				background: #e02800;
			}
		}
	}
</style>